<template>
    <div class="nav" v-bind:class="{on:isTop}">
        <div class="center">
            <a href="#" class="logo"></a>

            <div class="menu" v-bind:class="{'on':isShowNav}">
                <a href="javascript:void(0);" class="navicon" v-on:click="showNav"><i></i></a>
                <ul>
                    <li v-for="item in nav" v-bind:class="{'on':isActive==item.name}">
                        <router-link :to="item.link">{{item.txt}}</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import router from '../../router/index.js';

    export default {
        data (){
            return{
                isActive:'',
                isTop:false,
                isShowNav:false,
                nav: [
                    {link: '/', txt: '首页', name: 'home'},
                    {link: '/about/default', txt: '公司信息', name: 'about'},
                    {link: '/business', txt: '业务体系', name: 'business'},
                    {link: '/duty/0', txt: '社会责任', name: 'duty'},
                    {link: '/about/contact', txt: '联系我们', name: ''}
                ]
            }
        },
        mounted() {
            var _this = this;
            _this.isActive = router.currentRoute.name;
            if(_this.isActive=='home'){
                window.onscroll = function(){
                    _this.handleScroll();
                };
            }else{
                _this.isTop=true;
            }
        },
        methods : {
            handleScroll(){
                var top = document.body.scrollTop;
                if(top > 0){
                    this.isTop = true;
                }else{
                    this.isTop = false;
                }
            },
            showNav: function(){
                this.isShowNav = !this.isShowNav;
            }
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import '~assets/css/less.less';

    .nav{height:80px; line-height:80px; position:fixed; z-index:10; width:100%; font-family:'PingFangSC-Regular'; transition:all .8s; left:0; top:0;
        &.on{background:#4C6E9D;}
        .logo{display:inline-block; vertical-align:bottom; width:125px; height:70px; background:url("~assets/img/logo.png") 50% 50%/contain no-repeat; margin-left:20px;}
        .menu{float:right;
            .navicon{float:right; height:70/@rem; width:100/@rem; padding-top:30/@rem; overflow: hidden; display:none;
                i,&:before,&:after{content:''; display:block; height:6/@rem; width:50/@rem; background:#fff; margin:0 auto 10/@rem;}
            }
            ul{clear:both; margin-top: -6px;}
            li{display: inline-block; font-size:16px; margin:0 25px;
                a{color:#fff; text-decoration:none; padding-bottom:10px;}
                &.on,&:hover{
                    a{border-bottom:3px #fff solid; transition:all .1s;}
                }
            }
        }

    }
    @media screen and (max-width: @maxwidth){
        .nav{height:100/@rem; line-height:80/@rem; background:#4C6E9D; top:0;
            &.on{height:100/@rem; line-height:80/@rem;}
            .logo{width:165/@rem; height:100/@rem; line-height:80/@rem; margin-left:30/@rem;}
            .menu{width: 100%; position:absolute; top:0;
                &.on{
                    &:before{content:""; position: absolute; top:70/@rem; right: 0; margin-right:35/@rem; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #fff;}
                    ul{display:block;}
                }
                .navicon{display:block;}
                ul{width:100%; margin-top:0; text-align:left; background:#fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.2); display:none;}
                li{display:block; height:80/@rem; line-height:80/@rem; margin:0; font-size:28/@rem;
                    a{display:block; padding:0 3% 0; color:#555659; border-bottom:2/@rem #eee solid;}
                    &.on,&:hover{
                        a{border-bottom:2/@rem #4C6E9D solid; color:#4C6E9D;}
                    }
                }
            }

        }
    }
</style>